<template>
  <common-info-dialog
    :visible="dialogShow"
    :title="dialogTitle"
    width="800px"
    @cancel="close"
  >
    <common-group-title style="padding-left: 18px" title="基本信息" />
    <common-info-table :is-top-divided="true" :is-bottom-divided="true">
      <common-info-table-cell label="IP地址" width="50%">{{
        form.ip
      }}</common-info-table-cell>
      <common-info-table-cell label="端口" width="50%">{{
        form.port
      }}</common-info-table-cell>
      <common-info-table-cell label="版本号" width="50%">{{
        form.version
      }}</common-info-table-cell>

      <common-info-table-cell label="安全协议" width="50%">{{
        form.versionProtocol
      }}</common-info-table-cell>
      <common-info-table-cell label="当日访问量" width="50%">{{
        form.currentVisits
      }}</common-info-table-cell>

      <common-info-table-cell label="创建者" width="50%">{{
        form.createBy
      }}</common-info-table-cell>
      <common-info-table-cell label="创建时间">{{
        form.createTime
      }}</common-info-table-cell>
      <common-info-table-cell label="加密方式">{{
        form.cipher
      }}</common-info-table-cell>
      <common-info-table-cell label="备注">{{
        form.remark
      }}</common-info-table-cell>
    </common-info-table>
    <div class="week-visit">
      <common-group-title style="padding-left: 18px" title="一周访问量" />
      <div class="chart-container">
        <title-chart type="chart-bar" :dataset="columnOption" :titleVisible="false">
          <div slot="content"></div>
        </title-chart>
      </div>
    </div>
  </common-info-dialog>
</template>

<script>
import { fetchWeekVisitCounts } from "@/api/apisecurity/apiinterface/interface";
import TitleChart from "@/components/EChart/TitleChart";
export default {
  components: {
    TitleChart,
  },
  data() {
    return {
      dialogTitle: "详情",
      dialogShow: false,
      form: {},
      columnOption: {
        dimensions: ["days", "visits"],
        source: [],
        option: {
          rotate: 0,
          color: ["#448EF7"],
        },
      },
    };
  },
  methods: {
    close() {
      this.dialogShow = false;
    },
    show(data) {
      this.dialogShow = true;
      this.form = data || {};
      this.getWeekVisitCounts();
    },
    getWeekVisitCounts() {
      fetchWeekVisitCounts({ id: this.form.id, ip: this.form.ip, port: this.form.port }).then((res) => {
        if (res && res.code === 200) {
          if(res.rows && res.rows.length > 0){
            res.rows.forEach(item=>{
              item.days = item.days.substr(5)
            })
          }
          this.columnOption.source = res.rows;
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.week-visit {
  .week-visit-title {
    height: 30px;
    line-height: 30px;
    margin-left: 20px;
  }
  .chart-container {
    height: 400px;
    background-color: #fff;
    border-radius: 4px;
  }
}
</style>
